<template>
  <!--  <div class="container">-->
    <el-container class="layout-container">
        <el-aside width="200px">
      <el-menu active-text-color="#ffd04b" background-color="#232323" text-color="#fff" @select="handleSelect">
        <el-menu-item index="1">
          <el-icon>
            <Management />
          </el-icon>
          <span>视频1</span>
        </el-menu-item>
        <el-menu-item index="2">
          <el-icon>
            <Management />
          </el-icon>
          <span>视频2</span>
        </el-menu-item>
        <el-menu-item index="3">
          <el-icon>
            <Management />
          </el-icon>
          <span>视频3</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon>
            <Management />
          </el-icon>
          <span>视频4</span>
        </el-menu-item>
        <!-- Custom menu item for buttons -->
                <!-- Custom menu item for buttons -->
                <el-menu-item index="5">
                  <template #title>
                    <div class="menu-buttons">
                      <el-button type="primary" round @click="addKeyPoint">添加关键点</el-button>
                    </div>
                  </template>
                </el-menu-item>
                <el-menu-item index="6">
                  <template #title>
                    <div class="menu-buttons">
                      <el-button type="primary" round @click="deleteKeyPoint">结束添加</el-button>
                    </div>
                  </template>
                </el-menu-item>
                <el-menu-item index="7">
                  <template #title>
                    <div class="menu-buttons">
                      <el-button type="primary" round @click="finishAndSend">生成危险区域</el-button>
                    </div>
                  </template>
                </el-menu-item>
                <el-menu-item index="8">
                  <template #title>
                    <div class="menu-buttons">
                      <el-input v-model="alarmAfterSeconds" name="alarmAfterSeconds" placeholder="请输入停留时长"></el-input>
                    </div>
                  </template>
                </el-menu-item>
                <el-menu-item index="9">
                  <template #title>
                    <div class="menu-buttons">
                      <el-button type="primary" round @click="clear">清空</el-button>
                    </div>
                  </template>
                </el-menu-item>
      </el-menu>
        </el-aside>
        <el-main>
                <!-- Four img tags to display the video streams -->
                <img class="video-stream" :src="videoSrc" :key="videoKey" @click="handleVideoClick($event)" width="auto%" height="auto">
                <div v-for="(position, index) in clickPositions" :key="index" class="dot" :style="{ top: position.y + 'px', left: position.x + 'px' }">
                </div>
        </el-main>
    </el-container>
  <!--  </div>-->
</template>

<script setup>
import axios from 'axios'
import { ref, onMounted } from 'vue';
import { ElButton, ElMessage } from "element-plus";
import { useUserStore } from '../../stores/index';

const userStore = useUserStore();
const videoSrc = ref('http://127.0.0.1:8000/api/dangerousArea/2');
const videoKey = ref(0);
const clickPositions = ref([]);
const showPos = ref([]);
const alarmAfterSeconds = ref(2); // This is now correctly used as a ref
const warning_log = ref([]);
const addingKeyPoint = ref(false);

const handleSelect = (key) => {
    if (key < 5){
            const baseUrl = 'http://127.0.0.1:8000/api/dangerousArea/';
            videoSrc.value = `${baseUrl}${key}`;
            videoKey.value++;
    }
};

const handleVideoClick = (event) => {
    if (addingKeyPoint.value) {
        const rect = event.target.getBoundingClientRect();
        const x = event.clientX;
        const y = event.clientY;
        const imgWidth = rect.width;
        const imgHeight = rect.height;
        const x1 = (event.clientX - rect.left)/imgWidth ;
        const y1 = (event.clientY - rect.top)/imgHeight ;
        clickPositions.value.push({ x, y });
        showPos.value.push({x1 ,y1});
    }
};

const deleteKeyPoint = () => {
    addingKeyPoint.value = false;
    clickPositions.value = [];
    showPos.value = [];
};

const addKeyPoint = () => {
    addingKeyPoint.value = true;
};

const finishAndSend = async () => {
    try {
        const response = await axios.post('http://127.0.0.1:8000/api/set_pos', {
    data: {
        'pos': showPos.value,
        'alarmAfterSeconds': alarmAfterSeconds.value,
    }
}, {
    headers: {
        'Content-Type': 'application/json'
    }
});
        console.log('Success:', response.data);
        clickPositions.value = [];
        showPos.value = [];
        addingKeyPoint.value = false;
    } catch (error) {
        console.error('Error:', error);
    }
};

const clear = async () => {
    try {
        const response = await axios.get('http://127.0.0.1:8000/api/clear_pos', {
            headers: {
                'token': userStore.token
            },
            timeout: 3000
        });
        console.log('Success:', response.data);
        clickPositions.value = [];
        showPos.value = [];
        addingKeyPoint.value = false;
    } catch (error) {
        console.error('Error:', error);
    }
};

</script>


<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}

.video-container {
  width: 640px;
  height: 480px;
  margin-left: 0px;
}


.controls {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
}

.camera-btn {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  margin-right: 10px;
}

.select-btn {
  margin-right: 10px;
}

.submit-btn {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  margin-right: 10px;
}

.dot {
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: red;
  border-radius: 50%;
}
.el-menu {
    border-right: none;
    height: 700px;
}

.el-main {
    width: auto;
    height: 550px;
}

.video-stream {
    width: 100%;
    height: 100%;
    /* border-radius: 4px; */
}
.layout-container .el-menu-item .menu-buttons {
  display: flex;
  justify-content: center; /* 居中按钮 */
  align-items: center; /* 垂直居中按钮 */
  padding: 0; /* 移除默认内边距 */
}

.layout-container .el-menu-item .menu-buttons .el-button {
  border: none; /* 移除边框 */
  background: transparent; /* 移除背景色 */
  color: #fff; /* 设置按钮文字颜色 */
  font-size: 14px; /* 设置按钮文字大小 */
  padding: 10px; /* 设置按钮内边距 */
  border-radius: 50%; /* 设置按钮圆角 */
  margin: 0 10px; /* 设置按钮间距 */
}

.layout-container .el-menu-item .menu-buttons .el-button:hover {
  background: #333; /* 鼠标悬停时按钮背景色 */
  color: #fff; /* 鼠标悬停时按钮文字颜色 */
}

</style>